<template>
	<view class="wrap">
		<u-waterfall v-model="all.flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="wrap-list flex flex-dir-c wrap-list-left" style="margin-right: 15rpx;"
					v-for="(item, index) in leftList" :key="index"
					@click="skip(`/pages/networking/detail/index?id=${item.id}`,item.auth_name)">
					<image mode="aspectFill" class="f1" :src="item.first_image" v-if="item.auth_name || item.nickname"></image>
					<u-swiper height="100%" class="f1" :list="item.images" v-else @click="(e) => changeSwiper(item.images,e)"></u-swiper>
					<view class="plr-20" v-if="item.auth_name || item.nickname">
						<view style="margin-top: 13rpx;">
							<text style="margin-right: 15rpx;" class="font-32 font-bold">{{item.auth_name}}</text>
							<text class="font-20" style="color: #666666;" v-if="item.company_info">{{item.company_info?.position}}</text>
						</view>
						<view class="description mt-20 font-24" v-if="item.company_info && item.company_info.company">
							{{item.company_info?.company || ''}}
						</view>
						<view class="flex flex-ai-c mb_30" style="font-size: 20rpx;margin-top: 25rpx;">
							<i-icon class="mr-10" icon="icon-city-" size="20rpx" color="rgb(182,182,182)" />
							<view class="mr-20">{{item.city}}</view>
							<view class="description f1">{{item.follow}}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="wrap-list flex flex-dir-c" v-for="(item, index) in rightList" :key="index"
					@click="skip(`/pages/networking/detail/index?id=${item.id}`,item.auth_name)">
					<image mode="aspectFill" class="f1" :src="item.first_image" v-if="item.auth_name || item.nickname"></image>
					<u-swiper name="image" height="100%" class="f1" :list="item.images" v-else @click="(e) => changeSwiper(item,e)"></u-swiper>
					<view class="plr-20" v-if="item.auth_name || item.nickname">
						<view style="margin-top: 13rpx;">
							<text style="margin-right: 15rpx;" class="font-32 font-bold">{{item.auth_name}}</text>
							<text class="font-20" style="color: #666666;" v-if="item.company_info">{{item.company_info?.position}}</text>
						</view>
						<view class="description mt-20 font-24" v-if="item.company_info && item.company_info.company">
							{{item.company_info?.company || ''}}
						</view>
						<view class="flex flex-ai-c mb_30" style="font-size: 20rpx;margin-top: 25rpx;">
							<i-icon class="mr-10" icon="icon-city-" size="20rpx" color="rgb(182,182,182)" />
							<view class="mr-20">{{item.city}}</view>
							<view class="description f1">{{item.follow}}</view>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<view style="padding: 50rpx 0;" v-if="all.flowList.length">
			<u-loadmore bg-color="none" :status="props.loadStatus" @loadmore="props.loadmore"></u-loadmore>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive, watch, getCurrentInstance
	} from 'vue'
	interface Props {
		list ?: any[]
		defaultImg ?: string
		loadStatus ?: string,
	}

	const props = withDefaults(defineProps<Props>(), {
		list: () => [],
		defaultImg: '',
		loadStatus: 'loadmore'
	})
	const emit = defineEmits(['loadmore'])
	const all = reactive({
		flowList: [],
		fileUrl: uni.getStorageSync('fileUrl') || ''
	})
	const { proxy } : any = getCurrentInstance()
	const changeSwiper = (item,e) => {
		let i = item[e]
		if(i.switchTab) {
			uni.switchTab({
				url: '/'+ i.path
			})
		}else {
			uni.navigateTo({
				url: '/'+ i.path
			})
		}
	}
	const skip = (url, type) => {
		if (type) {
			uni.navigateTo({
				url: url
			})
		}

	}
	watch(() => props.list, async (newList) => {
		if(newList.length === 0) {
			all.flowList = []
			await proxy.$refs.uWaterfall.clear()
		}else {
			all.flowList = []
			all.flowList = props.list
		}
	})
</script>

<style lang="scss" scoped>
	.wrap {
		margin: 20rpx 20rpx;
		.wrap-list-left:first-child{
			height: 450rpx !important;
		}
		.wrap-list {
			border-radius: 20rpx;
			background: #fff;
			margin: 10rpx 0;
			height: 518rpx;
			
		}
	}

	image {
		width: 100%;
	}

	.description {
		-webkit-line-clamp: 1;
	}
</style>